<template>
    <div class="card">
        <div class="header">
            <div>
                <span class="modify">{{ modify }}</span>
                <span v-if="modify" class="line">|</span>
                <span>{{ title }}</span>
            </div>
            <slot name="button" />
        </div>
        <div class="body">
            <slot />
        </div>
        <div v-if="footer" class="footer">
            <slot name="footer" />
        </div>
    </div>
</template>

<script>
export default {
    name: 'CardBox',
    props: {
        title: {
            type: String,
            default: ''
        },
        modify: {
            type: String,
            default: ''
        },
        footer: {
            type: Boolean,
            default: false
        }
    },
}
</script>

<style lang="scss" scoped>
.card {
    width: 100%;
    margin-bottom: 24px;
    background: #fff;
    border: 1px solid #F5F7FA;
    border-radius: 5px;
    .header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 40px;
        line-height: 40px;
        padding: 0 16px;
        background: #FAFAFA;
        border: 1px solid #F5F7FA;
        border-radius: 5px 5px 0 0;
        font-size: 14px;
        color: #171725;
        .modify {
            font-size: 14px;
            font-weight: bold;
            color: #171725;
        }
        .line {
            margin: 0 8px;
        }
    }
    .body, .footer {
        ::v-deep .item {
            margin-bottom: 32px;
            font-size: 14px;
            color: #171725;
            display: flex;
            align-items: flex-start;
            &.spe {
                font-size: 16px;
                font-weight: bold;
            }
            .label {
                font-weight: bold;
                flex-shrink: 0;
            }
            .value {
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
            }
        }
    }
    .body {
        padding: 24px 16px 0 16px;
    }
    .footer {
        margin: -8px 16px 0 16px;
        padding-top: 24px;
        border-top: 1px solid #F0F4F7;
    }
}
</style>
